<template>
    <div class="top-box">
        <div class="box">
            <h1>
                电商后台管理
            </h1>
            <el-icon>
                <Menu />
            </el-icon>
        </div>


        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                {{ userStore.name }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="home">首页</el-dropdown-item>
                    <el-dropdown-item command="logout">登出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

    </div>
</template>

<script setup lang="ts">
import { ArrowDown, Menu } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { useUserStore } from "@/store/user/index"

const userStore = useUserStore()
const router = useRouter()

const handleCommand = (cmd: string) => {
    switch (cmd) {
        case "home":
            router.push("/index")
            break;

        case "logout":
            // 删除token
            localStorage.removeItem("token")
            // 返回到登录页面
            router.push("/login")
            // 删除pinia中的数据 删除动态路由
            userStore.activeMenus.forEach((item) => {
                router.removeRoute(item.name)
            })
            router.removeRoute("home")
            // infoArr = 空
            userStore.infoArr = []

            break;
    }
}

</script>

<style lang="less" scoped>
.top-box {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box {
        display: flex;
        align-items: center;

        h1 {
            margin-right: 18px;
        }

        .el-icon {
            margin-top: 6px;
            font-size: 20px;
        }
    }

    .el-dropdown-link {
        color: #fff;
    }

    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }
}
</style>